<template>
  <div id="address">
    <div class="top">
      <span @click="goback()">&lt;</span>
      <span>选择收货地址</span>
      <span>新增地址</span>
    </div>
    <div class="search">
      <div class="dangqian">
        <b @click="go()">{{ this.$store.getters.newcity }}</b>
        <i class="iconfont icon-daohang"></i>
      </div>
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="请输入你的收货地址" />
    </div>

    <div class="d1">附近地址</div>
    <ul>
      <li v-for="(v, i) in arr" :key="i" @click="pushadrs(v), gotop()">
        {{ v }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getlink } from "../api/getlink";
export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    pushadrs(data) {
      this.$store.commit("upaddress", { newaddress: data });
    },
    gotop() {
      this.$router.go(-1);
    },
    go() {
      this.$router.push("/alladdress");
    },
  },
  mounted: function () {
    getlink("/data/address").then((ok) => {
      this.arr = ok.data.fujingdizhi;
    });
  },
};
</script>

<style scoped>
#address {
  font-size: 0.16rem;
  font-weight: 700;
  padding: 0 0.1rem;
  background-color: #fff;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.74rem;
  padding: 0.2rem 0;
}
span:last-child {
  font-size: 0.12rem;
}
.search {
  width: 3.5rem;
  height: 0.44rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.dangqian {
  width: 0.8rem;
  height: 0.14rem;
  border-right: 1px solid #e8e8e8;
  text-align: center;
  line-height: 0.14rem;
  font-size: 0.14rem;
}
.icon-search {
  margin-left: 0.1rem;
}
input {
  background-color: #f5f5f5;
  padding-left: 0.06rem;
}
.d1 {
  font-size: 0.1rem;
  color: #c9c9c9;
  font-weight: 400;
  margin-top: 0.1rem;
}
li {
  height: 0.48rem;
  padding-left: 0.2rem;
  line-height: 0.48rem;
  border-bottom: 1px solid #e8e8e8;
}
</style>